<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--<link href="http://at.alicdn.com/t/font_0jgk5oxe1qo20529.css" rel="stylesheet">-->
    <link href="../../bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="../../css/base.css" rel="stylesheet">
    <link href="../../css/common.css" rel="stylesheet">
    <link href="../../css/iconfont.css" rel="stylesheet">
    <link href="gray-table.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="../../bootstrap/js/html5shiv.js"></script>
    <script src="../../bootstrap/js/respond.min.js"></script>
    <![endif]-->
    <title>Title</title>
</head>
<body style="height: 100%;overflow-y: hidden;padding-top: 20px;">
<form method="post" action="http://www.baidu.com">
    <div class="col-sm-12 h-100 container-fluid" id="table">
        <header class="gray-table-header">
            <span class="label-title"><i class="icon icon-fenlei"></i>开单套餐明细</span>
            <i class="icon icon-zhuxiao add" style="font-size: 13px;padding-top: 2.5px"></i>
            <i class="icon icon-xiugai edit"></i>
            <i class="icon icon-xinzeng delete" style="padding-top: 1px"></i>
        </header>
        <div class="gray-table-body">
            <div class="gray-table-search row" style="margin: 0">
                <i class="icon icon-chaxun pull-right" style="margin-right: 10px;margin-top: 2px;"></i>
                <div class="gray-group pull-right">
                    <label class="pull-left">单价:</label>
                    <input type="text" placeholder="单价小于" name="filterPrice">
                </div>
                <div class="gray-group pull-right">
                    <label class="pull-left">收费项目:</label>
                    <input type="text" placeholder="收费项目" name="filterCharge">
                </div>
            </div>
            <div class="table-radius">
                <table class="table table-fixed table-hover text-center"></table>
            </div>
            <!--<div class="page-size pull-left">-->
                <!--<span>每页显示条数:</span>-->
                <!--<select class="form-control pull-right">-->
                    <!--<option value="5">5</option>-->
                    <!--<option value="8">8</option>-->
                    <!--<option value="10" selected>10</option>-->
                    <!--<option value="12">12</option>-->
                    <!--<option value="15">15</option>-->
                <!--</select>-->
            <!--</div>-->
            <!--<div class="page"></div>-->
        </div>
    </div>
    <button type="submit">提交</button>
</form>
</body>
<script src="../../js/jquery-1.11.1.js"></script>
<script src="gray-table.js"></script>
<script src="../gray_expand_table/gray-expand-table.js"></script>
<script>
    //表格定义
	var setting={
        attribute : {"data-id":"id", "data-item-id":"itemId"},//放着要存在tr标签中的数据 key表示的是a标签中的属性  value表示的是json数据中的key
        param : {},//url请求参数
        url:"data.json",
        method:"get",
        paging:{
            pageNum:"pageNum",//表示这是第几页，后面的value表示的是服务器需要的key
            pageSize:"pageSize"//表示每页显示，后面的value表示的是服务器需要的key
        },
        filter:[
            {"selector":".gray-table-search input:eq(1)"},
            {"selector":".gray-table-search input:eq(0)"}
        ],
        pageSize:["5",10,15,20],
        selectOption:15,
        column:[
            {
                colspan:1,
                text:"",
				title: "",
                html:"<input type='checkbox'>"
            },
            {
                colspan:6,
                text:"itemName",
				title: "收费项目",
                format:function (row,index) {
                    return "<a>"+row.itemName+"</a>";
                }//自定义td中的html，row为从服务器获得的那一行的数据
            },
            {
                colspan:2,
				text:"binNumber",//值为json数据中要显示的那串数据的key
				title: "数量"
            },
            {
                colspan:2,
				text:"itemUnit",//值为json数据中要显示的那串数据的key
				title: "单位"
            },
            {
                colspan:4,
				text:"itemPrice",
				title: "单价(元)"
            },
            {
                colspan:4,
				title: "操作",
                html:'<i class="icon icon-del"></i>'
            }
        ],
        rowClick: function($tr,rowData){
            log4j.info($tr.data("id"));
            log4j.info(rowData);
        }//单击行的事件
    };

	var expandSetting={
        attribute : {"data-item-id":"id"},//放着要存在tr标签中的数据 key表示的是a标签中的属性  value表示的是json数据中的key
        param : {},//url请求参数
        url:"data-expand.json",
        method:"get",
        width:"400",//设置表格的宽度，不设置就不加
        height:"400",//设置表格的高度，不设置就不加
        paging:{
            pageNum:"pageNum",//表示这是第几页，后面的value表示的是服务器需要的key
            pageSize:"pageSize"//表示每页显示，后面的value表示的是服务器需要的key
        },
        name:"fefe",
        column:[
            {
                colspan:6,
                text:"itemName",
				title:"收费项目"
            },
			{
                colspan:2,
                text:"id",
				title:"ID",
				hidden:true
            },
            {
                colspan:2,
                text:"itemUnit",
				title:"单位"
            },
            {
                colspan:4,
                text:"itemPrice",
				title:"单价(元)"
            }
        ],
        rowClick: function($tr,rowData){
            log4j.info(rowData);
        }//单击行的事件,$tr表示单击的那行的
    };


    $("#table").grayTable(setting,function () {//可仿照上面的配置自己写配置传入方法中，不传则默认为上面的配置
        $("#table").find("tBody").append('<tr><td colspan="1"></td><td colspan="6"><input type="text" name="itemName"></td><td colspan="2"><input type="text" name="binNumber"></td><td colspan="2"><select class="form-control"><option>次</option><option>日</option></select></td><td colspan="4"><input type="text" name="itemPrice"></td><td colspan="4"></td></tr>');
    }).find("tr:last").find("input:first").grayExpandTable(expandSetting);//第一个参数是配置 第二个参数是表格的选择器，必须用input点出这个方法，会给前面的input绑定事件,第三个参数是回调函数可以不加
    $("#table").find("tBody").find("tr:last").find("input:last").grayExpandTable(expandSetting,"#absolute-table-template");

</script>
</html>